<template>
	<div>

		<main>
			<a :href="target"><i class="fa fa-chevron-left"></i></a>
			<swiper :loop='true' auto :threshold='50' :aspect-ratio='1'>
				<swiper-item v-for='(item,ins) in good.avatar' :key='ins'>
					<div style="width: 100%;height:100%;background: rgba(0,0,0,.05)">
						<img style="width: 100%;height:100%;" :src="'http://localhost:2200'+item" alt="" />
					</div>

				</swiper-item>
			</swiper>

			<div class="good">
				<p><img src="/static/img/1.png" alt="" />{{good.name}} </p>
				<p> <span>店家寄语</span> {{good.describe}}</p>
				<p> 商品活动 <span>{{good.send | sendC}}</span></p>
				<p>
					<sapn><span class="small">¥</span>{{good.price}}</sapn><span>&nbsp;</span><span>共销 {{good.cellNum}}件</span></p>
				<p>
					<a :href="'#/buller/seller/'+good.king_id._id"><span>店铺荣誉分 {{good.king_id.score}}</span>{{good.king_id.nickName}} <span>进店 <i class="fa fa-chevron-right"></i></span></a>
				</p>
			</div>
			<div class="safe">
				<span><i class="fa fa-check-circle"></i>极速退货</span>
				<span><i class="fa fa-check-circle"></i>正品保证</span>
				<span><i class="fa fa-check-circle"></i>极速退款</span>
			</div>
			<div class="score">
				<div><span>积分</span>购买可获10点淘气值</div>
				<div v-if="!color1&&!model1" class="choose" @click="showCart">
					选择颜色分类、型号<i class="fa fa-chevron-right"></i>
				</div>
				<div v-if="color1&&!model1" class="choose" @click="showCart">
					请选择 型号<i class="fa fa-chevron-right"></i>
				</div>
				<div v-if="!color1&&model1" class="choose" @click="showCart">
					请选择 颜色分类<i class="fa fa-chevron-right"></i>
				</div>

				<div v-if="color1&&model1" class="choose" @click="showCart">
					已选 {{color1}} {{model1}}<i class="fa fa-chevron-right"></i>
				</div>

			</div>
			<div class="desc">
				<p>———&nbsp; <i class="fa fa-wechat"></i>评论 &nbsp;———</p>
				<p style="text-align: left;padding-left: 20px;font-size: 12px;background: #F5F5DC;line-height:25px;color: #666;">宝贝评价（{{count}}）</p>
				<p><span @click="showForm1 = !showForm1" style="float: right;font-size: 14px;background: orangered;color: white;padding: 2px 10px;cursor: pointer;margin:5px 10px;border-radius: 7%;">发布我的评价</span></p>
				<div class="clear">
					
				</div>
				<form @submit="desc" v-if="showForm1">
					<textarea v-model.trim="question" name="question" placeholder="发表您的宝贵意见"></textarea>
					<div class="foot">
						<u v-for='(item,ins) in imgNum'>

						<i @click="minus" :value='ins' class="fa fa-minus-circle"></i>
						<img-upload ></img-upload>
						<input type="hidden" name="xu" value="1" />
						
					</u>
						<span @click="addImg"><i class="fa fa-plus"></i></span>

					</div>
					<button type="submit">提交</button>
				</form>

				<ul class="one">
					<li v-for="(item,ins) in descs" :key='ins'>
						<p><img :src="'http://localhost:2200'+item.king_id.avatar" /><span>{{item.king_id.nickName}}</span>
							<span>{{item.king_id.score}}点</span>
						</p>
						<p>{{item.question}}</p>
						<p><span>{{item.create_time | date}}</span></p>
						<div>
							<img v-for="(imgOne,index) in item.avatar" :key='index' :src="'http://localhost:2200'+imgOne" alt="" />
						</div>
						<p class="clickP"><span @click="showForm2" style="float: right;font-size: 14px;background: salmon;color: white;padding: 2px 10px;cursor: pointer;margin:5px 10px;border-radius: 7%;">评论ta</span></p>
						<div class="clear">
							
						</div>
						<div class="form"  style="display: none;" >
							
						
						<form @submit.prevent="reply($event,good._id,item._id,item.king_id._id)">
							<p><span @click="hideForm2" style="float: right;font-size: 14px;background: salmon;color: white;padding: 2px 10px;cursor: pointer;margin:5px 10px;border-radius: 7%;">收起</span></p>
						<div class="clear">
							
						</div>
							<textarea name="content" placeholder="评论Ta"></textarea>
							<button type="submit">评论</button>
						</form>
						<ul class="reply">
							<li v-for="(reply,ins) in replys" v-if="reply.desc_id._id == item._id">
								<p><img :src="'http://localhost:2200'+reply.king_id.avatar"/><span>{{reply.king_id.nickName}}</span></p>
								<p>{{reply.content}}</p>
								<p><span>{{reply.create_time | date}}</span></p>
								
							</li>
						</ul>
					
						</div>
						
						
						
					</li>

				</ul>

			</div>
<div class="loading">
			<loading :show="show1" style='z-index: 99;' :text="text1"></loading>
		</div>
		</main>
		
		<footer>
			<ul>
				<li>
					<a :href="'#/buller/seller/'+good.king_id._id"><i class="fa fa-h-square"></i>店铺</a>
				</li>
				<li @click="storeGood($event,good._id)">
					<a v-if="!store"><i class="fa fa-star-o"></i>收藏</a>
					<a v-if="store"><i class="fa fa-star"></i>已收藏</a>
				</li>
			</ul>
			<div v-if="!color1 || !model1">
				<a @click="showCart">
					加入购物车
				</a>
				<a @click="showCart">
					立即购买
				</a>
			</div>
			<div v-if="color1 && model1">
				<a @click="plusCar">
					加入购物车
				</a>
				<a @click="tiao($event,num,good._id,color1,model1)">
					立即购买
				</a>
			</div>
		</footer>
		<div class="tan">
			<div class="top" @click="hideCart">

			</div>
			<div>
				<div class="head">
					<div><img :src="'http://localhost:2200'+good.avatar[0]" /></div>
					<div>
						<p><span>¥{{good.price}} <i class="fa fa-times-circle-o" @click="hideCart"></i></span></p>
						<p>库存{{good.count}}</p>
						<p v-if="!color1&&!model1">请选择 颜色分类 型号</p>
						<p v-if="color1&&!model1">请选择 型号</p>
						<p v-if="!color1&&model1">请选择 颜色分类</p>
						<p v-if="color1&&model1">已选 {{color1}} {{model1}}</p>

					</div>
				</div>

				<div class="main">
					<div class="body">
						<ul class="color">
							<h4>颜色分类</h4>
							<li @click="color($event,item)" v-for='(item,ins) in good.color' :key='ins'>{{item}}</li>

						</ul>
						<ul class="model">
							<h4>尺码</h4>
							<li @click="model($event,item)" v-for='(item,ins) in good.model' :key='ins'>{{item}}</li>
						</ul>
					</div>
					<p class="notice" style="text-align: center;color: orangered;display: none;margin-bottom: 10px;position: absolute;width: 100%;bottom: 60px;">请选择商品属性</p>
					<div class="foot">
						<h4>购买数量</h4>
						<div>
							<a class="minus" @click="minus" style="background: #eee;"><i class="fa fa-minus"></i></a>
							<span class="num">{{num}}</span>
							<a @click="plus"><i class="fa fa-plus"></i></a>
						</div>
					</div>

					<div v-if="color1 && model1" class="submit">

						<a @click="plusCar">
							加入购物车
						</a>
						<a @click="tiao($event,num,good._id,color1,model1)">
							立即购买
						</a>

					</div>

					<div v-if="!color1 || !model1" class="submit">

						<a @click="notice">
							加入购物车
						</a>
						<a @click="notice">
							立即购买
						</a>

					</div>

				</div>

			</div>
		</div>

		<div class="content">
			<div>

				{{content}}
			</div>
		</div>

	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import SellerTap from '../components/SellerTap'
	import { Swiper, SwiperItem } from 'vux'
	import { Loading } from 'vux'	
	import ImgUpload from '../components/ImgUpload'
	export default {
		data: function() {
			return {
				question: '',
				target: '',
				good: {},
				store: false,
				t: true,
				color1: '',
				model1: '',
				num: 1,
				goodId: '',
				content: '',
				user: null,
				descs: [],
				imgNum: ['1'],
				page: 1,
				show1 :true,
				has:false,
				text1:'加载中...',
				count:0,
				showForm1:false,
				replys:[],
				replyCount:0,
			}
		},
		components: {
			SellerTap,
			Swiper,
			SwiperItem,
			ImgUpload,
			Loading
		},
		filters: {
			cate: function(value) {
				var categorys = [
					['life', '生活用品'],
					['phone', '手机'],
					['computer', '电脑'],
					['dress', '服饰鞋帽'],
					['dresser', '美妆洗护'],

					['digital', '平板数码'],
					['household', '家电'],

					['wrap', '箱包礼品']
				];

				for(var i = 0; i < categorys.length; i++) {
					if(categorys[i][0] == value) {

						return categorys[i][1];
					}
				}

			},
			date(value) {
				value = new Date(value);
				return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()+' '+value.getHours()+':'+value.getMinutes()+':'+value.getSeconds();
			},
			sendC(value) {

				if(value == true) {
					return '包邮'
				} else {
					return ''
				}

			}
		},
		methods: {
			reply(ev,good_id,desc_id,author_id){
				ev.preventDefault();
				var content = $(ev.currentTarget).children('textarea').val().trim();
				if(!this.user) {
					this.content = '亲先登录吧~';
					$('.content').fadeIn();
					setTimeout(function() {
						$('.content').fadeOut();

					}, 1000);
					return;
				}
				if( content == ''){
					this.content = '请填写内容~';
					$('.content').fadeIn();
					setTimeout(function() {
						$('.content').fadeOut();

					}, 1000);
					return;
				}
				
				axios.post('/buller/reply',{
					content,
					good_id,
					desc_id,
					author_id
				}).then((result)=>{
					console.log(result.data);
					
					if(result.data.msg = 'success') {
							this.content = '评论成功~';
					
							this.replys = result.data.replys;
							$('.content').fadeIn();
							setTimeout(function() {
								$('.content').fadeOut();

							}, 1000);
							
							
						}
					
					
				}).catch((err)=>{
					console.log(err);
				})
				
				
			},
			showForm2(ev){
				var parent = $(ev.currentTarget).closest('li');
				var form = parent.find('.form');
				form.fadeIn();
				$(ev.currentTarget).parent().css('display','none');
			},
			hideForm2(ev){
				var parent = $(ev.currentTarget).closest('li');
				var form = parent.find('.form');
				form.css('display','none');
				parent.find('.clickP').fadeIn();
			},
			desc(ev) {
				ev.preventDefault();
				if(!this.user) {
					this.content = '亲先登录吧~';
					$('.content').fadeIn();
					setTimeout(function() {
						$('.content').fadeOut();

					}, 1000);
					return;
				}
				if(!this.question) {
					this.content = '请填写内容~';
					$('.content').fadeIn();
					setTimeout(function() {
						$('.content').fadeOut();

					}, 1000);
					return;
				}

				var data = new FormData($('form')[0]);

				var that = this;
				$.post({
					url: '/buller/desc?good_id='+that.good._id+'&seller_id='+that.good.king_id._id,
					data,
					contentType: false,
					processData: false,
					success: function(resData) {

						if(resData.msg = 'success') {
							that.content = '评论成功~';
							that.imgNum = [];
							that.question = '';
							that.descs = resData.descs;
			
							$('.content').fadeIn();
							setTimeout(function() {
								$('.content').fadeOut();

							}, 1000);
							
							
						}

					}
				})

			},
			tiao(ev, num, good_id, color1, model1) {

				if(!this.user) {
					this.content = '亲先登录吧~';
					$('.content').fadeIn();
					setTimeout(function() {
						$('.content').fadeOut();

					}, 1000);
					return;
				} else {
					location.href = '#/buller/bullgoods?num=' + num + '&id=' + good_id + '&color=' + color1 + '&model=' + model1
				}

			},
			storeGood(ev, good_id) {

				if(!this.user) {
					this.content = '亲先登录吧~';
					$('.content').fadeIn();
					setTimeout(function() {
						$('.content').fadeOut();

					}, 1000);
					return;
				}

				axios.get('/buller/store?good_id=' + good_id).then((result) => {
					if(result.data == 'success') {
						this.store = !this.store;

					}
				}).catch((err) => {
					console.log(err);
				})

			},
			plusCar() {

				axios.post('/buller/plusCar', {
					good_id: this.goodId,
					color: this.color1,
					model: this.model1,
					num: this.num
				}).then((result) => {
					console.log(result.data);
					if(result.data == 'fail') {
						this.content = '亲先登录吧~';
						$('.content').fadeIn();
						setTimeout(function() {
							$('.content').fadeOut();

						}, 1000);
					} else if(result.data == 'success') {

						this.content = '添加成功  ~';
						$('.content').fadeIn();
						setTimeout(function() {
							$('.content').fadeOut();

						}, 1000);
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			notice() {
				$('.notice').fadeIn();
				setTimeout(function() {
					$('.notice').fadeOut();

				}, 700)
			},
			minus(ev) {

				if(this.num - 1 <= 1) {
					$(ev.currentTarget).css('background', '#eee')

				} else {
					$('.minus').css('background', '#ddd')

				}
				if(this.num - 1 <= 0) {
					return;
				}
				this.num--;
			},
			plus() {
				this.num++;
				if(this.num > 1) {
					$('.minus').css('background', '#ddd')
				}
			},
			color: function(ev, color) {
				$(ev.currentTarget).css({
					'background': 'orangered',
					'color': 'white'
				}).siblings().css({
					'background': '#eee',
					'color': '#333'
				});
				this.color1 = color;

			},
			model(ev, model) {
				$(ev.currentTarget).css({
					'background': 'orangered',
					'color': 'white'
				}).siblings().css({
					'background': '#eee',
					'color': '#333'
				});
				this.model1 = model;
			},
			showCart() {
				$('body').css('overflow-y', 'hidden')
				$('.tan').css({

					'background': 'rgba(0,0,0,.5)',
					'display': 'block'
				})

				$('.tan > div').animate({
					'height': '75%'
				}, 200);
			},
			hideCart() {
				$('body').css('overflow-y', 'scroll')
				$('.tan > div').animate({
					'height': '0%'
				}, 200, function() {
					$('.tan').css('display', 'none', )
				});
			},
			addImg() {
				this.imgNum.push('1');
			},
			minus(ev) {
				//				var ins = Number($(ev.currentTarget).attr('value'));
				//				
				$(ev.currentTarget).closest('u').empty();
			},
		},
		mounted() {

			console.log(this.$route.query)
			if(this.$route.query.aa) {
				this.target = '#/'
			} else if(this.$route.query.name) {
				this.target = '#/buller/result?name=' + this.$route.query.name
			} else if(this.$route.query.category) {
				this.target = '#/buller/result?category=' + this.$route.query.category
			} else if(this.$route.query.bb) {
				this.target = '#/buller/car'
			} else if(this.$route.query.seller) {
				this.target = '#/buller/seller/' + this.$route.query.seller;
			} else if(this.$route.query.store) {
				this.target = '#/buller/store'
			} else {
				this.target = '#/'
			}

			var id = this.$route.params.id;
			this.goodId = id;
			axios.get('/buller/goodInfo/' + id).then((result) => {
				this.good = result.data.good;
			}).catch((err) => {
				console.log(err);
			})

			axios.get('/buller/checkLogin').then((result) => {

				this.user = result.data.data;

			}).catch((err) => {
				console.log(err);
			})

			axios.get('/buller/checkStore?good_id=' + this.goodId).then((result) => {

				this.store = result.data.store;

			}).catch((err) => {
				console.log(err);
			})
			
			var that = this;
			axios.get('/buller/getDesc?good_id=' + this.$route.params.id).then((result) => {
				this.descs = result.data.descs;
				this.count = result.data.count;
			}).catch((err) => {
				console.log(err);
			})
			
			axios.get('/buller/getReply?good_id=' + this.$route.params.id).then((result) => {
				console.log(result.data.replys);
				this.replys = result.data.replys;
				this.replyCount = result.data.count;
			}).catch((err) => {
				console.log(err);
			})
			
			
		
			
			$(document).on('scroll', window, function() {
				var countH = $(document).outerHeight();
				var scrH = $(window).scrollTop();
				var winH = $(window).height();
				//				console.log(countH, winH, scrH);
				if(!that.has) {

					if((scrH + winH) > (countH - 3)) {
						that.page += 1;
						
						that.has = true;

						axios.get('/buller/getDesc?good_id=' + that.$route.params.id+"&page=" + that.page).then(function(result) {
						
							that.count = result.data.count;
							
							if(result.data.descs.length<=0){
								return;
							}
							
							$('.loading').fadeIn();
							setTimeout(function() {
								$('.loading').fadeOut(function() {
									result.data.descs.forEach(function(item) {
					
										that.has = false;
										that.descs.push(item);
									})
								});
							}, 500)

						}).catch(function(err) {
							console.log(err)
						})

					}
				}

			})
			
			
			

		}

	}
</script>

<style scoped>
	.clear{
		clear: both;
	}
	form {
		overflow: hidden;
		padding: 10px 0;
		border-bottom: solid 1px #EEEEEE;
		margin-bottom: 10px;
	}
	
	form textarea {
		width: 102%;
		padding: 2% 2%;
		font-size: 13px;
		border: solid 1px #EEEEEE;
		height: 70px;
		padding-right: 7%;
		text-indent: 2em;
	}

	.desc>ul>li{
		border-bottom:  solid 1px ghostwhite;
	}
	.desc ul li p{
		padding: 0 10px;
	}
	.desc ul li div{
		padding: 0 10px;
	}
	.desc ul li p:first-child{
		position: relative;
	}
	.desc ul li p:first-child img{
		width: 30px;
		height:30px;
		border-radius: 50%;
	}
	.desc ul li p:first-child span{
		position: relative;
		top: -10px;
		left:5px;
		
	}
	.desc ul li p:first-child span:nth-child(3){
		left: 10px;
		top: -10px;
		font-size: 11px;
		color: orange;
		border: solid 1px orange;
		padding: 0 3px;
		border-radius: 7%;
	}
	.desc ul li p:nth-child(2){
		color: #555;
		font-size: 14px;
	}
	.desc ul li p:nth-child(3) span{
		color: #bbb;
		font-size: 10px;
	}
	
	
	.desc>ul>li>div img{
	
		width: 90px;
		height:90px;
		margin: 10px;
	}
	.desc>ul>li>form{
		
	}
	.desc>ul>li>textarea{
		width: 110%;
	}
	.reply li{
		padding-left: 20px;
		background: #EEEEEE;
		margin: 10px 0;
	}
	.foot {
		padding: 13px 0px;
		margin-top: 0px;
		font-size: 13px;
		text-align: left;
	}
	
	.foot>div {
		border-bottom: none;
	}
	
	.foot span {
		display: inline-block;
		width: 50px;
		padding-top: 10px;
		margin-left: 22px;
		cursor: pointer;
	}
	
	.foot span i {
		position: relative;
		top: -21px;
		color: red;
		line-height: 100px;
		font-size: 30px;
	}
	
	.foot u>div {
		border: none;
		margin: 5px;
	}
	
	.foot u,
	.color u,
	.model u {
		display: inline-block;
		position: relative;
	}
	
	.color input,
	.model input {
		text-align: center;
		width: 60px;
		border: solid 1px #eee;
		padding: 0 5px;
	}
	
	.foot u>i,
	.color u i,
	.model u i {
		position: absolute;
		top: 0;
		z-index: 8;
		font-size: 15px;
		cursor: pointer;
		animation: dong .5s linear infinite;
		color: orangered;
		transform: rotate(10deg);
	}
	
	@keyframes dong {
		from {
			transform: rotateY(50deg);
		}
		to {
			transform: rotateY(-50deg);
		}
	}
	
	main {
		padding-bottom: 83px;
	}
	
	form button {
		width: 30%;
		color: white;
		background: orangered;
		border: none;
		line-height: 30px;
		border-radius: 5%;
		float: right;
		margin-right: 10px;
		margin-top: 5px;
		cursor: pointer;
	}
	
	main>a {
		top: 10px;
		left: 13px;
		text-align: center;
		background: rgba(0, 0, 0, .3);
		width: 30px;
		line-height: 30px;
		border-radius: 50%;
		color: #eee;
		position: absolute;
		z-index: 200;
	}
	
	.good {
		padding: 10px;
	}
	
	.good p {
		line-height: 18px;
		width: 100%;
		word-wrap: break-word;
		margin: 5px 0;
	}
	
	.good p:nth-child(1) {
		/*text-indent: 2em;*/
		font-size: 16px;
	}
	
	.good p:nth-child(1) img {
		width: 18px;
		position: relative;
		top: 2px;
		margin-right: 5px;
	}
	
	.good p:nth-child(2) span {
		color: orange;
		font-size: 13px;
	}
	
	.good p:nth-child(2) {
		font-size: 15px;
		color: #777;
	}
	
	.good p:nth-child(3) {
		font-size: 15px;
	}
	
	.good p:nth-child(3) span {
		padding: 0px 2px;
		border: solid 1px goldenrod;
		border-radius: 12%;
		margin-right: 5px;
		font-size: 11px;
		color: goldenrod;
		margin-left: 5%;
	}
	
	.good p:nth-child(4) {
		color: red;
		font-size: 18px;
	}
	
	.good p:nth-child(4) {
		overflow: hidden;
	}
	
	.good p:nth-child(4)>span {
		float: right;
		/*display: inline-block;*/
		width: 33.3%;
		text-align: center;
	}
	
	span.small {
		font-size: 12px;
	}
	
	.good p:nth-child(4) span:nth-child(3) {
		font-size: 12px;
		color: #888;
		/*margin-left: 30%;*/
	}
	
	.good p:nth-child(5) a {
		display: block;
		width: 100%;
		text-align: right;
		color: #888;
		font-size: 13px;
	}
	
	.good p:nth-child(5) a span {
		color: #666;
		margin-left: 2%;
	}
	
	.good p:nth-child(5) a span:first-child {
		font-size: 10px;
		color: orangered;
		margin-right: 10%;
	}
	
	.good p:nth-child(5) a i {
		font-weight: 400;
		font-size: 10px;
		position: relative;
		top: -1px;
	}
	
	.safe {
		background: #EEEEEE;
		padding: 10px 10px;
		font-size: 12px;
		color: #777;
		border-bottom: solid 1px #ddd;
		overflow: hidden;
	}
	
	.safe span {
		float: left;
		width: 33.3%;
	}
	
	.safe i {
		font-size: 15px;
		margin-right: 3px;
		color: orangered;
	}
	
	.score {
		background: #ddd;
	}
	
	.score div {
		padding: 10px 10px;
		font-size: 12px;
		color: #777;
		background: #EEEEEE;
	}
	
	.score span {
		font-size: 11px;
		border-radius: 10%;
		padding: 0px 2px;
		border: solid 1px orangered;
		color: orangered;
		margin-right: 3%;
	}
	
	.score div.choose {
		margin-top: 10px;
		background: white;
		color: #333;
		font-size: 13px;
		overflow: hidden;
		cursor: pointer;
	}
	
	.fa-star {
		color: orangered;
	}
	
	.score div.choose i {
		float: right;
		color: #aaa;
		position: relative;
		top: 4px;
	}
	
	.desc>p:first-child {
		text-align: center;
		color: darkgray;
		background: #eee;
		font-size: 13px;
		line-height: 28px;
	}
	
	.tan {
		display: none;
		background: rgba(0, 0, 0, 0);
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 300;
		font-size: 13px;
		color: #333;
		transition: all .2s;
	}
	
	.foot {
		padding-left: 10px;
	}
	
	.tan h4 {
		font-size: 16px;
		font-weight: 500;
		color: black;
	}
	
	.tan .top {
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
		height: 24%;
		background: rgba(0, 0, 0, 0);
	}
	
	.tan ul {
		padding-left: 10px;
	}
	
	.tan>div {
		height: 0;
		background: white;
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 300;
	}
	
	.tan>div .head {
		padding: 10px;
		height: 25%;
	}
	
	.tan>div>div:nth-child(2) {
		height: 64%;
		overflow-y: scroll;
	}
	
	.tan>div>div:nth-child(3) {
		height: 9%;
	}
	
	.tan>div .head div:first-child {
		display: inline-block;
		position: relative;
		width: 32%;
		height: 100px;
		top: -25px;
		background: #EEEEEE;
		padding: 5px;
		border-radius: 5%;
	}
	
	.tan>div .head div:first-child img {
		width: 100%;
		height: 100%;
	}
	
	.tan>div .head div:last-child {
		width: 66%;
		display: inline-block;
		position: relative;
		top: -25px;
	}
	
	.tan>div .head div:last-child p {
		line-height: 25px;
	}
	
	.tan>div .head div:last-child p:first-child {
		color: orangered;
		overflow: hidden;
	}
	
	.tan>div .head div:last-child p:first-child i {
		float: right;
		font-size: 25px;
		color: #777;
	}
	
	.tan>div .body ul {
		overflow: hidden;
	}
	
	.tan>div .body ul {
		margin: 10px 0;
	}
	
	.tan>div .body ul h4 {
		margin-bottom: 10px;
	}
	
	.tan>div .body ul li {
		cursor: pointer;
		float: left;
		margin-right: 10px;
		margin-top: 5px;
		border-radius: 15%;
		padding: 2px 8px;
		background: #eee;
	}
	
	.tan>div .body ul {
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: solid 1px #EEEEEE;
	}
	
	.tan .foot {
		overflow: hidden;
		border-bottom: solid 1px #eee;
		padding-bottom: 10px;
	}
	
	.tan .foot h4 {
		float: left;
	}
	
	.tan .foot div {
		float: right;
		padding-right: 10px;
	}
	
	.tan .foot div a {
		display: inline-block;
		width: 40px;
		line-height: 27px;
		text-align: center;
		border-radius: 9%;
		color: #888888;
		background: #ddd;
		cursor: pointer;
	}
	
	.tan .foot div span {
		display: inline-block;
		text-align: center;
		width: 40px;
		margin: 0;
	}
	
	.submit {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 300;
	}
	
	.submit a {
		text-align: center;
		font-size: 14px;
		float: left;
		width: 50%;
		border: none;
		color: white;
		line-height: 57.6px;
		cursor: pointer;
	}
	
	.submit a:first-child {
		background: linear-gradient(to right, #FF9966 10%, #FF8800 100%);
	}
	
	.submit a:last-child {
		background: linear-gradient(to right, #FF7700 10%, #FF4400 100%);
	}
	
	.content {
		position: fixed;
		width: 100%;
		text-align: center;
		color: white;
		font-size: 13px;
		bottom: 12%;
		left: 0;
		display: none;
		z-index: 400;
	}
	
	.content div {
		border-radius: 5%;
		width: 60%;
		margin: 0 auto;
		line-height: 30px;
		background: #777;
	}
	.loading {
		position: fixed;
		background: rgba(0,0,0,.5);
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 500;
		display: none;
	}
	footer {
		border-top: solid 1px #eee;
		position: fixed;
		bottom: 0;
		left: 0;
		overflow: hidden;
		width: 100%;
		background: darkgray;
	}
	
	footer ul {
		float: left;
		width: 40%;
		background: white;
	}
	
	footer ul li {
		padding: 5px;
		float: left;
		width: 50%;
		text-align: center;
	}
	
	footer ul li:first-child a i {
		color: orangered;
	}
	
	footer ul li a i {
		display: block;
		font-size: 19px;
	}
	
	footer ul li a {
		color: #666;
		display: block;
		height: 30px;
		line-height: 15px;
		font-size: 11px;
		cursor: pointer;
	}
	
	footer div {
		float: left;
		width: 60%;
	}
	
	footer div a {
		text-align: center;
		float: left;
		width: 50%;
		border: none;
		color: white;
		line-height: 40px;
		cursor: pointer;
	}
	
	footer div a:first-child {
		background: linear-gradient(to right, #FF9966 10%, #FF8800 100%);
	}
	
	footer div a:last-child {
		background: linear-gradient(to right, #FF7700 10%, #FF4400 100%);
	}
</style>